{% load i18n %}
{% load static %}
{% load simpletags %}

<div id="home">
  <el-card class="box-card" style="margin-bottom: 10px;">
    <div slot="header">
      <i class="fas fa-chart-line"></i>
      <span v-text="getTranslate('Last enroll trend')"></span>
    </div>
    {% include "admin/component/chart/dashboard/line.html" %}
    <display-line-chart source="{% url 'student-enroll-trending' %}"></display-line-chart>
  </el-card>

  <el-row :gutter="20">
    <el-col :span="16">
      <el-card class="box-card" style="margin-bottom: 20px;">
        <div slot="header">
          <i class="fas fa-link"></i>
          <span v-text="getTranslate('Quick navigation')"></span>
        </div>
        <el-row :gutter="20">
          {% if "SIMPLEUI_HOME_QUICK"|get_config != False %}
            <el-col :span="4" v-for="(c,j) in models" :key="c.name" class="quick-wrap">
              <el-card shadow="hover">
                <a href="javascript:void(0);" @click="openTab(c,(j+1)+'')">
                  <span class="icon" :class="c.icon"></span>
                  <span v-text="c.name"></span>
                </a>
              </el-card>
            </el-col>
          {% endif %}
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header">
          <i class="fas fa-history"></i>
          <span>{% trans 'Recent actions' %}</span>
          <el-button v-waves style="float: right; padding: 3px 0" type="text" :icon="timeline?'el-icon-arrow-up':'el-icon-arrow-down'" @click="displayTimeline()"></el-button>
        </div>
        {% load log %}
        {% get_admin_log 10 as admin_log for_user user %}
        {% if admin_log %}
          <transition name="el-zoom-in-top">
            <div class="block" v-if="timeline">
              <el-timeline>
                {% for entry in admin_log %}
                  <el-timeline-item timestamp="{{ entry.action_time }}" placement="top">
                    <el-card>
                      <p>{{ entry.user }} {{ entry.action_time }}</p>
                      <h4>{{ entry.content_type }}: {{ entry }}</h4>
                    </el-card>
                  </el-timeline-item>
                {% endfor %}
              </el-timeline>
            </div>
          </transition>
        {% endif %}
      </el-card>
    </el-col>

    <el-col :span="8">
      <el-card class="box-card">
        <div slot="header">
          <i class="fas fa-chart-pie"></i>
          <span v-text="getTranslate('Last enroll ratio')"></span>
        </div>
        {% include "admin/component/chart/dashboard/pie.html" %}
        <display-pie-chart source="{% url 'student-enroll-ratio' %}"></display-pie-chart>
      </el-card>
    </el-col>
  </el-row>
</div>